import React, { useEffect } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Breadcrumb, Layout, theme } from 'antd';

import SysHeader from '@/components/SysHeader';
import SysSider from '@/components/SysSider'

const { Content } = Layout;

const Business = () => {
    let location = useLocation();
    useEffect(() => {
        console.log(location, 'location')
    }, [location])
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return <Layout style={{
        minHeight: '100vh',
    }}>
        <SysHeader />
        <Layout>
            <SysSider />
            <Content
                style={{
                    margin: '0 16px',
                }}
            >
                <Breadcrumb
                    style={{
                        margin: '16px 0',
                    }}
                >
                    <Breadcrumb.Item>User</Breadcrumb.Item>
                    <Breadcrumb.Item>Bill</Breadcrumb.Item>
                </Breadcrumb>
                <div
                    style={{
                        padding: 24,
                        minHeight: 360,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Outlet />
                </div>
            </Content>
        </Layout>
    </Layout>
}

export default Business